<template>
  <div>
    <div class="title">
      <el-radio-group
        v-model="isCollapse"
        style="margin-bottom: 20px"
        @change="sale"
      >
        <el-radio-button label="销量"></el-radio-button>
        <el-radio-button label="销售额"></el-radio-button>
      </el-radio-group>

      <el-select v-model="value" placeholder="请选择" @change="saledate">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <ve-pie :data="chartData" :extend="pieExtend"></ve-pie>
    <p></p>
    <p>全国销量分布图</p>
    <ve-map :data="mapData" :extend="mapExtend"></ve-map>
  </div>
</template>

<script>
import { AdminStatApi } from "../../request/httpaip";
export default {
  data() {
    return {
      // 列表框选择
       options: [{
          value: '选项1',
          label: '昨天'
        }, {
          value: '选项2',
          label: '今天'
        }, {
          value: '选项3',
          label: '前3天'
        }, {
          value: '选项4',
          label: '前7天'
        }, {
          value: '选项5',
          label: '前14天'
        }],
      // 列表框内容
        value: '',
      // 按钮选择
      isCollapse: "销量",
      //地图数据
      mapData: {
        // columns: ['位置', '税收', '人口', '面积'],
        // rows: [
        //   { '位置': '吉林', '税收': 123, '人口': 123, '面积': 92134 },
        //   { '位置': '北京', '税收': 1223, '人口': 2123, '面积': 29234 },
        //   { '位置': '上海', '税收': 2123, '人口': 1243, '面积': 94234 },
        //   { '位置': '浙江', '税收': 4123, '人口': 5123, '面积': 29234 }
        // ]
      },
      mapExtend: {
        legend: {
          show: false,
        },
        title: {
          text: "全国销量分布图",
          show: true,
        },
        series: {
          type: "map",
          aspectScale: 1.2,
          zoom: 1.2,
          label: {
            show: false,
          },
          emphasis: {
            label: {
              show: false,
            },
            itemStyle: {
              areaColor: "#8884D8",
            },
          },
          showLegendSymbol: false,
          itemStyle: {
            borderColor: "#fff",
            borderWidth: 2,
            areaColor: "#FD5B2B",
          },
        },
        visualMap: {
          type: "continuous",
          min: 0,
          max: 1000000,
          calculable: true,
          inRange: {
            color: ["#121122", "rgba(3,4,5,0.4)", "red"],
          },
        },
        tooltip: {
          formatter: "{b0} <br />销量: {c0}",
        },
      },

      //饼图数据
      chartData: {
        // columns: ['日期', '访问用户'],
        // rows: [
        //   { '日期': '1/1', '访问用户': 1393 },
        //   { '日期': '1/2', '访问用户': 3530 },
        //   { '日期': '1/3', '访问用户': 2923 },
        //   { '日期': '1/4', '访问用户': 1723 },
        //   { '日期': '1/5', '访问用户': 3792 },
        //   { '日期': '1/6', '访问用户': 4593 }
        // ]
      },
      pieExtend: {
        legend: {
          right: 20,
          height: 100,
          orient: "vertical",
        },
        series: {
          type: "pie",
          center: ["30%", "55%"], //圆心坐标
          radius: ["30%", "75%"], //内半径设设置 显示成圆环图
        },
      },
    };
  },
  methods: {
    // 点击切换
    sale(val) {
      console.log(val);
      if (val === "销售额") {
        // 运营数据
        AdminStatApi().then((res) => {
          if (res.errno === 0) {
            // 饼图设置
            this.chartData = {
              columns: ["name", "seven_days_money"],
              rows: res.data.salePie,
            };
          }
        });
      }else{
        // 运营数据
        AdminStatApi().then((res) => {
          if (res.errno === 0) {
            // 饼图设置
            this.chartData = {
              columns: ["name", "sale_seven_days"],
              rows: res.data.salePie,
            };
          }
        });
      }
    },
    
        // 选择销售日期
    saledate(val){
      if(val==='选项1'){
            // 运营数据
        AdminStatApi().then((res) => {
          if (res.errno === 0) {
            // 饼图设置
            this.chartData = {
              columns: ["name", "sale_yesterday"],
              rows: res.data.salePie,
            };
          }
        });
      }else if(val==='选项2'){
            // 运营数据
        AdminStatApi().then((res) => {
          if (res.errno === 0) {
            // 饼图设置
            this.chartData = {
              columns: ["name", "sale_today"],
              rows: res.data.salePie,
            };
          }
        });
       }else if(val==='选项3'){
            // 运营数据
        AdminStatApi().then((res) => {
          if (res.errno === 0) {
            // 饼图设置
            this.chartData = {
              columns: ["name", "sale_three_days"],
              rows: res.data.salePie,
            };
          }
        });
    }else if(val==='选项4'){
            // 运营数据
        AdminStatApi().then((res) => {
          if (res.errno === 0) {
            // 饼图设置
            this.chartData = {
              columns: ["name", "sale_seven_days"],
              rows: res.data.salePie,
            };
          }
        });
    }else if(val==='选项5'){
            // 运营数据
        AdminStatApi().then((res) => {
          if (res.errno === 0) {
            // 饼图设置
            this.chartData = {
              columns: ["name", "sale_fourteen_days"],
              rows: res.data.salePie,
            };
          }
        });
    }}


  },
  created() {
    // 运营数据
    AdminStatApi().then((res) => {
      if (res.errno === 0) {
        // 饼图设置
        this.chartData = {
          columns: ["name", "sale_seven_days"],
          rows: res.data.salePie,
        };
        // 地图设置
        this.mapData = {
          columns: ["areaName", "saleNum"],
          rows: res.data.saleMap,
        };
      }
    })
  },
}
</script>
 
<style lang = "less" scoped>
p {
  text-align: center;
  margin: 50px;
}
.title {
  display: flex;
  justify-content: space-between;
  /* align-content: center; */
}
</style>